Lo prometido es deuda y aquí algunas ideas para personalizar la widebar con pestañas.
En realidad los cambios no son cosa del otro mundo pero es cierto que el aspecto cambia considerablemente,  para aligerar un poco el trabajo voy a explicar donde podéis hacer las modificaciones.
Ubicamos en la plantilla el código correspondiente a los estilos que añadimos en la CSS:

/*--------Widetabt------------------*/
#tabsidebar-wrapper{width: 400px;float: right;border: 1px none #CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}
  Añadir color de fondo a pestañas
Comenzaremos con el color de las solapas o pestañas, todos sabemos que para modificar un fondo lo hacemos en background así que buscamos en nuestro código:
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
Modificando background: #EEE; por otro color estamos modificando el color de las pestañas 2 y 3
Para cambiar el color de la pestaña 1 lo haremos en:
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}

Color de fondo en contenido
Vamos a darle color a ese fondo que es la continuación de las pestañas, donde añadimos el contenido y para ello buscamos:
 .tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
De esta forma cambiamos el color de fondo que precede a las pestañas 1, 2 y 3

Añadir imagen de fondo a contenido
Ahora vamos ir un poco más lejos y los atrevidos pueden añadir una "imagen de fondo" en lugar de color.
Sustituimos background: #FFF; por background:url('aquí la url de tu imagen de fondo');
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
Quedaría algo así:
.tabberlive .tabbertab {background:url('aquí la url de tu imagen de fondo'); padding:5px;border:1px solid #CCC;border-top:0;}

Color del texto.
Si modificamos el color de las pestañas puede que el texto pase desapercibido o no resalte lo suficiente para ser legible así que cambiamos el color del texto en:
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
En esas tres líneas cambiaremos color:#369; por el color escogido.

Bordes.
Ahora vamos con los bordes, ya sabemos que en border podemos modificar el borde.
Donde solid es el tipo de borde y con px (pixels) determina el grosor del borde. Al mismo tiempo cambiaremos el color en #453135;
Borde superior de la caja:
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #453135;}
Borde que rodea las pestañas:
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
Borde que rodea el contenido de las pestañas:
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}

Efecto Hover.
Las pestañas viene con efecto hover, dicho efecto nos permite definir su aspecto, nos daremos cuenta porque al pasar el puntero sobre las pestañas cambian de color.
Efecto hover de la pestaña 1 modificamos el color en:
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
Efecto hover de las pestañas 2 y 3
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}



Antony

Hola! Hace tiempo de que estaba esperando esto... Saludos!

Responder
Gem@

Pues todo tuyo Antony :)

Responder
Zinquirilla

Hola, he dejado un comentario eprono sé si tienes filtro o se ha perdido, vendré mañana, gracias.

Responder
Antony

Tengo un problemilla... No lo puedo colocar...

Responder
Gem@

Zinquirilla no tengo ningún filtro, y este comentario ha salido sin problemas, cuando quieras lo puedes intentar de nuevo :)

Antony no puedo abrir tu archivo de imágenes, intenta mandarlas e notro formato que no sea doc

Responder
Anónimo

Gema, ¿se puede hacer en el nuevo formulario de comentarios, seguimiento a los comentarios? ¿que cuando alguien comente nos llegue por correo electrónico?

Muchas gracias

Responder
Anónimo

Y discula: ¿qué es y donde está la widebar? No todos sabemos qué es la "widebar".

Gracias

Responder
Gem@

Desde hace un par de días si se puede Fernando, en la entrada anterior a esta hablo de ello.
Sobre la widebar puedo decirte que un espacio extra añadido a la sidebar donde podemos almacenar varios contenidos en un mínimo espacio.
A ese espacio podemos añadir cualquier cosa como solemos hacer cuando añadimos un elemento de página.
Al principio de la entrada verás un enlace que te lleva a la entrada original con la explicación de cómo añadirla, esta entrada que ves ahora sólo es para personalizar la widebar una vez ya la tenemos instalada.

Responder
Unknown

Muy bueno Gema, no sé si lo haré así pero me has dado ideas para la widebar, besos mi vida!!!

Responder
Zinquirilla

Acabo de dejar un comentario y nada, lo haré por la forma de siempre.

Mi duda es donde poner le código si delante de head o de body.

Gracias.

Responder
Zinquirilla

An lo que pasaba es que puse corchetes (bueno el simbolito ese que no recedo nombre) delante de head.

Responder
Gem@

Graciela ya me enseñarás esas ideas :)

Zinquirilla esta entrada es para personalizar la widebar pero antes hay que añadirla, en esta entrada explico como hacerlo ;)

Responder
Anónimo

Muchas gracias, Gema.

Responder
Gem@

De nada Fernando :)

Responder
Emile

Justo, justo, una amiga lo quería para su blog. Me haces quedar bien, Gem@ :)

Una consulta que nada tiene que ver con esto. Quisiera ubicar arriba de las entradas los links de navegación (entradas anteriores, inicio, entradas posteriores) que por defecto salen debajo de todo. Para el uso de mi página se hace muy molesto ir hasta el final, ya se me quejaron al respecto :/
No tengo idea que cómo modificar esto. Está bien que me doy maña pero no es pa' tanto...
Gracias.

Responder
Admin

Sabés una cosa gem@? a mi, la widebar me queda con el fondo de la sidebar, o sea la imagen que tengo, la ha tomado sola, la celeste, no necesito cambiar nada, tal vez lo de las pestañas, pero no se...

Por ahora lo voy a dejar así, pero sigo esperando como agregar otra widebar... ;)

Responder
Gem@

Es raro porque tienes como fondo para la widebar el color #E5F5FF; debe ser porque al añadir la imagen en .sidebar .widget anula el efecto color. Queda mucho mejor así k_nelita más unificada con la sidebar.
La otra widebar la tengo entre manos nada más la tenga te envío mail, pero me gustaría probar en tu propia plantilla, debes decirme donde la vas a añadir, según es el sitio así la añadimos a la plantilla.
De esa forma te guío paso a paso con más seguridad.
(mándamela en archivo xml)

Responder
Admin

No gem@, no tengo ese color en la sidebar, tengo solo la imagen, el fondo es el blanco de la plantilla, pero si, queda perfecto con la sidebar, aunque no se porque ha tomado la imagen...
La plantilla en txt va marchando...

PD: Ahh, si ya me acuerdo que le puse el color por si se estiraba y no alcanzaba a cubrir la widebar, quedaba una parte abajo en blanco, por eso le puse el color, para disimular al estirarse y que se una con la imagen, como siempre llevas la razón ;)
Besitos :D

Responder
Gem@

Ya la tengo k_nelita :) la plantilla digo.

Responder
Naida

Hola! Antes de intentar hacer las pestañas quería saber si solo puedo hacerla de una o dos etiquetas en concreto puesto que tengo muchísimas y se me generarían un montón de pestañas y lo que me interesa es si puedo selecionar las que quiero

Responder
Naida
Este comentario ha sido eliminado por el autor.
Responder
Gem@

Naida puedes añadir de cuantas pestañas quieras siempre que no sobrepase el ancho de la sidebar.

Responder
gmm

Hola Gema:

Hace tiempo que tu blog me ayuda mucho! Gracias!

Perdona la pregunta tan simple, pero para subir ficheros utilizo google sites pero no acepta ficheros js. Como puedo subirlos?

Responder
Gem@

Hola GMM Yo uso para alojamiento de archivos Sky Drive y admite archivos js.
Mira esta entrada te será de ayuda:
Scripts y otras contrariedades
Cualquier cosa me dices ;)

Responder
gmm

Gracias Gema, ya solucioné el problema y pude poner una widebar en mi blog!

Responder
Gem@

Gracias por comentar GMM me alegra que lo consiguieras ;)

Responder
Anónimo

Gema esperando que tengas tiempo para ayudarme quisiera qu me ayudes con el fondo de las pestañasde mi blog, en la primera pestaña(google) sale perfecto como quiero pero en las demas salen con unos bordes y un fondo que no me agrada quisiera que se vean como en la primera pestaña espero que me ayudes este es mi blog de pruebas, me despido esperando que me ayudes y deseandote felices fiestas de fin de año.

Responder
Fingolfin

hola gema como estas, tengo una interrogante, al parecer se han dando de baja los url de los colores de las pestañas, porque hace tiempo las mías se han quedado transparente, sera que podes subir nuevamente esa data y pasarla?... como ejemplo te paso la dirección de mi sitio www.fondosyfonditos.com.ar

Responder
Gem@

yz Fingolfin llevas razón, esa página ya no usa la misma url. Pero esta otra si ;)
http://exploding-boy.com/images/cssmenus2/menus.html#
Es conveniente guardar las imágenes y alojarlas en nuestro servidor para que esto no ocurre ;)

yz STBAN siento no ver este comentario antes :(

Responder
Anónimo

hola gem@!! dos preguntas referentes a la sidebar. (no respondas si no puedes o no quieres!!)
1) ¿cómo hago para ocultar los enlaces a los directorios en http://soupcouture.blogspot.com? es decir, que aparezca solo la palabra directorio y al pulsar se despliegue el directorio.
2) ¿cómo hago para dividir la sidebar en cuadraditos como lo tienes tú en el blog?
Thank iuuuu

Responder
Gem@

yz Hola lk, lo de los cuadritos creo recordar que lo hablamos en otro comentario, sobre ese efecto de mostrar-ocultar puedes ver esta entrada:
http://gemablog-.blogspot.com/2008/01/la-inquietud-de-elizabetha-me-ha.html :)

Responder
Admin

Gemit@ otra vez molestando con este tema :P Puse una widewbar en Te Propongo para achicar un poco la sidebar, tengo cosas muuuuy largas :D

Me quedó bastante bien, pero... si, como siempre, quiero otra, estuve tratando de copiar lo que hicimos en FolkTango pero no sale bien, hice cada desastres que no te puedo explicar ja jaa
Porque la quiero poner en la otra sidebar, puse una en una sidebar y quiero otra para la otra, se entiende?

Me sale abajo de los post o arriba o en la misma sidebar en que está la otra... un desastre :S

Así que la saqué y vengo aquí a pedir un SOS :D
A ver si me puedes guiar en que sitio colocar el código, el que va en la parte de abajo en sidebar-wrapper, el otro ya se, pero es para que quede en la otra sidebar, están numeradas 1 y 2 pero no me sale :(
Besotes ;)

Responder
Giancarlo

Hola Gema y Hola a todos,

Mi pregunta es la siguiente que pasa con los blogs que tienen esos elances, pero que se ven y no los podemos usar, exite alguna forma de usarlos o quitarlos y poner otros. Te dejo la direccion de blog para que veas de que te hablo. Espero que me puedas ayudar muchas gracias

http://variostemasenlaweb.blogspot.com/

Responder
Gem@

:: Giancarlo Briceño y Ma. Walewska Pérez
Esos enlaces hay que configurarlos seguramente desde la plantilla.
Si me dices a qué enlaces te refieres en concreto si a los del menú superior o la parte inferior (final del blog) te digo como hacerlo.
Normalmente los autores de las plantillas ofrecen información sobre la forma de hacer esos cambios.

Responder
Giancarlo

Hola Gema,

Antes que nada GRACIAS por responder... (por cierto en estos dias te envie un mail ¿te llego?), bueno volviendo al tema me refiero a los enlaces que dicen (en mi blog) Photoshop, Freebies, Icon... etc y los 4 que estan por encima de estos tambien home, template... etc. Lo que quiero es tenerlos como los que tu tienes en la parte superiror de tu blog. Talvez no necesite habilitar todosssss ahora pero si algunos... No se creo que se puede ver menos recardo el blog ¿Tu que me sugieres Gema?... Lo que pasa es (y disculpa por lo largo del comentario, pero voy a provechar la ocasion)estoy mudando el contenido de tres blog a este y por eso hablo de recardo, ahora no se ve pero cuando empiece a mudar el contenido si, entonces queria hacer esto... Acepto tus sugerencias y recomendaciones.

Mil Gracias

Responder
Gem@

:: Hola Giancarlo no sé a qué mail te refieres tengo que revisar el correo, a veces el mail no coincide con el nombre de autor y me es complicado saber quién es la persona que me escribe a no ser que me lo indique.
Sobre los menús es lo que tienes en la parte superior del blog arriba del todo.
Son dos menús independientes, y abajo lo que hay es un contenedor donde puedes incluir gadget o cualquier otro contenido.
Si te sitúas en plantilla de diseño verás que puedes incluir cosas igual que en la sidebar.

Continuamos con el menú superior.
Para configuralo debes situarte en plantilla de diseño y buscar lo siguiente:

<div class='topnav'>
<ul id='topnav'>
<li><a href='http://variostemasenlaweb.blogspot.com/'>Home</a></li>
<li><a href='#' target='_blank'>
Template Gallery</a></li>

<li><a href='#' target='_blank'>Emoticon</a></li>
<li><a href='http://blogger.com' target='_blank'>Login</a></li>
</ul>
</div>

Al igual que añadiste la url de la página para el HOME debes hacer con los siguientes enlaces.
Por ejemplo en <a href='#' target='_blank'>
Template Gallery</a>
Sustituyes Template Gallery por el texto que quieras y la almohadilla # por el enlace.
Así debes hacerlo en todos.
Si dudas de utilizar todos los enlaces del menú entonces mejor esperar a decidirte y cuando veas el contenido del blog instalado entonces ves lo que puede serte útil o lo que eliminas.

Responder
Giancarlo

Hola Gema,

Muchas gracias, lo voy hacer y te aviso a ver que tal.

Exito

Responder
Gem@

:: Suerte Giancarlo :)

Responder
Unknown

Hola Gema, te quiero felicitar por la calidad de tu Blog, me gusta mucho tu diseño y las modificaciones que le hiciste, yo igual tengo un blog y me acabo de iniciar en esto por eso es que no tiene la calidad que yo quisiera, me gusta la idea de compartir conocimientos pues eso motiva a otras personas a hacer lo mismo y hacemos de la Web un lugar de conocimiento universal que nos hace avanzar más que en otros tiempos.
Saludos

Responder
Gem@

:: Saludos Helios, me aparece estupendo que pienses así. Compartiendo nos beneficiamos todos :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top